<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="renderer" content="webkit">
    <title>1169移动端可视化定制分析</title>
    <link rel="stylesheet" href="../assets/iconfont/iconfont.css">
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/good01_all.css">
    <script src="../assets/js/jquery-3.3.1.min.js"></script>
    <script src="../assets/js/freezeTable.js"></script>
    <script src="../js/common.js"></script>

    <style>
        main h3 {
            margin-top: 0.3rem;
        }
    </style>


</head>

<body>
<div id="container">
    <header class="mainHeader">
        <h1>1169移动端可视化定制分析</h1>
        <nav class="secondNav">
            <ul class="btnGroup">
                <li onclick="loadAllData('综合')">
                    <button class="active">综合</button>
                </li>
                <li onclick="loadAllData('乐家')">
                    <button>乐家</button>
                </li>
                <li onclick="loadAllData('乐农')">
                    <button>乐农</button>
                </li>
                <li onclick="loadAllData('车小微')">
                    <button>车小微</button>
                </li>
            </ul>
        </nav>
        <div class="inputGroup">
            <label for="date"></label>
            <input id="date" type="date">
        </div>
        <nav class="mainNav">
            <ul>
                <li>
                    <a href="../index.html">
                        <i class="iconfont icon-index"></i>
                        <div class="text">首页</div>
                    </a>
                </li>
                <li class="active">
                    <a href="#">
                        <i class="iconfont icon-shangpin"></i>
                        <div class="text">商品</div>
                    </a>
                </li>
                <li class="unDev">
                    <a href="#">
                        <i class="iconfont icon-yonghu"></i>
                        <div class="text">用户</div>
                    </a>
                </li>
                <li class="unDev">
                    <a href="#">
                        <i class="iconfont icon-caidan"></i>
                        <div class="text">平台</div>
                    </a>
                </li>

            </ul>
        </nav>

    </header>
    <main>
        <div class="l">
            <h3>订单对比分析</h3>
            <div class="box">
                <div class="l-t">
                    <div class="item">
                        <h4>订单</h4>
                        <div class="btnGroup">
                            <button class="active" onclick="requestOrder('订单量')">订单量</button>
                            <button onclick="requestOrder('订单额')">订单额</button>
                        </div>
                        <div class="table-responsive">
                            <table class="blueTxt" id="text">
                                <thead>
                                <tr>
                                    <th>指标</th>
                                    <th>当日新增</th>
                                    <th>月累计</th>
                                    <th>年累计</th>
                                    <th>上期增幅</th>
                                    <!--<th> </th>-->
                                </tr>
                                </thead>
                                <tbody>
                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="item">
                        <h4>订单占比</h4>
                        <div class="btnGroup">
                            <button class="active" onclick="shopping('dp1169_app_anlyze_011')">订单量</button>
                            <button onclick="shopping('dp1169_app_anlyze_012')">订单额</button>
                        </div>
                        <div class="chartBox" id="ec001_pie"></div>
                    </div>
                </div>
                <div class="l-b">
                    <div class="item">
                        <h4>订单趋势</h4>
                        <div class="btnGroup">
                            <button class="active" onclick="draw('dp1169_app_anlyze_013')">订单量</button>
                            <button onclick="draw('dp1169_app_anlyze_014')">订单额</button>
                        </div>
                        <div class="chartBox" id="ec002_line"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="r">
            <div class="r-t">
                <h3>订单统计分析</h3>
                <div class="box">
                    <div class="item">
                        <h4>客单价排名</h4>
                        <div class="btnGroup">

                        </div>
                        <div class="chartBox" id="ec003_hBar"></div>
                    </div>
                    <div class="item">
                        <h4>订单渠道</h4>

                        <div class="chartBox" id="ec004_radar"></div>
                    </div>

                </div>


            </div>
            <div class="r-b">
                <h3>订单转化率分析</h3>
                <div class="box">
                    <div class="item">
                        <h4 class="app_rate">购买次数与客户数</h4>
                        <div class="chartBox" id="ec005_hBar"></div>
                        <div class="chartBox funnel_box" id="funnel_box">
                            <ul>

                            </ul>
                        </div>
                    </div>
                    <div class="item">
                        <h4>产品转化率</h4>
                        <div class="chartBox" id="ec006_line"></div>
                    </div>
                </div>

            </div>
        </div>
    </main>
</div>

<script src="../assets/js/echarts-4.1.0.rc2.min.js"></script>
<script src="../js/chartsCom.js"></script>
<script src="../js/goods01_all.js"></script>

<script>
    $(function () {
        //显示当前时间
        var now = new Date();
        //格式化日，如果小于9，前面补0
        var day = ("0" + now.getDate()).slice(-2);
        //格式化月，如果小于9，前面补0
        var month = ("0" + (now.getMonth() + 1)).slice(-2);
        //拼装完整日期格式
        var today = now.getFullYear() + "-" + (month) + "-" + (day);
        //完成赋值
        $('#date').val(today);

        // $(".l-t table").fxdHdrCol();
       /* new superTable("text", {
            // cssSkin : "sDefault",
            headerRows : 3,
            fixedCols : 1
        });*/

    });

    function itemLeJia() {
        let ec006_data = [
            [0, 0, 7], [1, 0, 6], [2, 0, 5], [3, 0, 4], [4, 0, 3], [5, 0, 2], [6, 0, 1],
            [0, 1, 7], [1, 1, 6], [2, 1, 5], [3, 1, 4], [4, 1, 3], [5, 1, 2], [6, 1, 1],
            [0, 2, 7], [1, 2, 6], [2, 2, 5], [3, 2, 4], [4, 2, 3], [5, 2, 2], [6, 2, 1],
        ];
        let ec006_scatter = echarts.init($("#ec006_line")[0]);
        ec006_scatter.clear()
        ec006_scatter.setOption(opt_scatter);
        ec006_scatter.setOption({
            grid: {
                top: '15%',
                bottom: '10%',
                left: '12%',
                right: '7%',
            },
            color: '#00ccff',
            xAxis: {
                boundaryGap: true,
                data: ["浏览", "注册", "详情页", "购物车", "下单", "支付", "交易完成"]
            },
            yAxis: {
                name: '人数',
                minInterval: 50,
                boundaryGap: true,
                data: ["乐家", "乐农", "车小微",]
            },
            series: [
                {
                    type: 'scatter',
                    symbolSize: function (val) {
                        return val[2] * 5 * bodyScale;
                    },
                    data: ec006_data,
                    animationDelay: function (idx) {
                        return idx * 7 * bodyScale;
                    }
                },
            ]
        });
    }

    $(function () {
        $(".mainNav>ul>li:not(.unDev)").click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
        $('.btnGroup button').click(function () {
            $(this).addClass("active").siblings().removeClass("active");
        });
        $('.secondNav .btnGroup button').click(function () {
            $(this).addClass("active").parent().siblings().children().removeClass("active");
            let item = $(this).text();
            if (item === '综合') {
                itemAll();
                $(".r .r-b .item h4.app_rate").html("购买次数与客户数");
            } else if (item === '乐家') {
                itemLeJia();
                $(".r .r-b .item h4.app_rate").html("APP转化率");
            }
        });

        //订单占比
        let ec001_pie = echarts.init($("#ec001_pie")[0]);
        ec001_pie.setOption(opt_pie);
        ec001_pie.setOption({
            legend: {
                show: false,
                data: ['乐家', '乐农', '车小微']
            },
            series: [
                {
                    type: 'pie',
                    radius: ['45%', '50%'],
                    center: ['50%', '40%'],
                    avoidLabelOverlap: false,
                    label: circle_series_label,
                    labelLine: {},
                    data: [
                        {value: 335, name: '乐家'},
                        {value: 310, name: '乐农'},
                        {value: 234, name: '车小微'}
                    ]
                }
            ]
        });
//			loadKeDanJia();
        //订单渠道
        let ec004_radar = echarts.init($("#ec004_radar")[0]);
        ec004_radar.setOption(opt_radar);
        ec004_radar.setOption({
            legend: {
                data: ['乐家', '乐农', '车小微'],
            },
            tooltip: {},
            radar: {
                indicator: [
                    {name: 'APP', max: 6500},
                    {name: 'M站', max: 16000},
                    {name: '微信', max: 30000},
                    {name: '微博', max: 38000},
                    {name: 'QQ', max: 52000}
                ]
            },
            series: [{
                name: '',
                type: 'radar',
                color: colors,
                itemStyle: {
                    normal: {
                        areaStyle: {
                            type: 'default',
                            opacity: 0.2, // 图表中各个图区域的透明度
                        }
                    }
                },
                data: [
                    {
                        value: [0, 0, 0, 0, 0, 0],
                        name: '乐家'
                    },
                    {
                        value: [0, 0, 0, 0, 0, 0],
                        name: '乐农'
                    },
                    {
                        value: [0, 0, 0, 0, 0, 0],
                        name: '车小微'
                    }
                ]
            }]
        });

        function itemAll() {

        }
    });
    let json = [];
    let time;
    let cbkCode;

    //刷新数据

</script>
</body>

</html>